<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>会员数据概况</title>
<%@include file="/WEB-INF/base.jspf"%>
<style type="text/css">
.body_wrapper {
	height: 100%;
	width: 100%;
	box-sizing: border-box;
	padding: 0px 20px;
}
	.modal-dialog {
		max-width: 1000px;
	}
.wrapper_buttons {
	position: relative;
}

.shezhileiContent {
	width: 160px;
	height: 150px;
	border: 1px solid #9c8f8f;
	border-radius: 5px;
	box-sizing: border-box;
	padding: 13px;
	position: absolute;
	right: 0px;
	top: 36px;
	z-index: 999;
	background: #fff;
}

.shezhileiContent li {
	margin-bottom: 10px;
}

.shezhileiContent li span {
	margin-left: 6px;
}

.wrapper_buttons input {
	height: 32px;
	width: 174px;
	margin-left: 10px;
}

#table_id_example_paginate{
 margin-right:100px;
}
.class-input-pageNumber{
	width:40px;
	height:23px;
	position: absolute;
	right:55px;
	top:12px;
}
.class-span-searchBtn{
	height:24px;
	width:36px;
	font-size:14px;
	text-algin:center;
	line-height:25px;
	padding:0!important;
	position: absolute;
	right:15px;
	top:12px;
}
.dataTables_length{
	margin-top:12px;
	margin-left:50px;
}
.tableSearch{
    position: relative;
}
.wrapper_buttons button {
	margin-left: 10px;
}

#table_id_example01_paginate, #table_id_example02_paginate,
	#table_id_example03_paginate, #table_id_example04_paginate {
	margin-right: 100px;
	text-align: center;
}

table th,table tr,table td {
text-align: center;
vertical-align:middle;
}
.modal {
	overflow: auto!important;
}
.td-hidden {
	display: none;
}
</style>
</head>
<body>
	<div class="body_wrapper">
		<div class="wrapper_buttons" style="display: flex; margin-top: 20px;margin-bottom: 30px;">
			<input type="text" name="" id="obj-name" value="" class="form-control" placeholder="单用户查询" />
			<button type="button" class="layui-btn layui-btn-radius" id="btn-searchTable">查询</button>
			<button type="button" class="layui-btn layui-btn-radius" id="btn-resetTable">重置</button>
		</div>
		<div>
		  <table class="class-tableDataTable table table-striped table-bordered table-hover" id="table_id_example">
		     <thead>
		     <tr>
		       <th>用户帐号</th>
		        <th>用户昵称</th>
		       <th>用户电话</th>
		       <th>用户QQ</th>
		       <th>用户余额</th> 
		       <th>注册时间</th>
		       <th>查看详情</th> 
		       </tr>
		     </thead>
		     <tbody>
		     </tbody>
		  </table>
		</div>
		</div>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog" style="width:1000px!important;">
        <div class="modal-content">
            <div class="modal-body">
	 			<table class=" table table-striped table-bordered table-hover">
					<thead>
						<tr>
							<th>用户帐号</th>
							<th>所属代理</th>
							<th>注册时间</th>
							<th>用户余额</th>
							<th>当前打码</th>
							<th>出款打码</th>
						</tr>
					</thead>
					<tbody>
						<tr>
						<td class="obj-name"></td>
						<td class="obj-ssdaili"></td>
						<td class="obj-zctime"></td>
						<td class="obj-yue"></td>
						<td class="obj-dqdamal"></td>
						<td class="obj-cksxdamal"></td>
						</tr>
					</tbody>
				</table>
				<table class="table table-striped table-bordered table-hover">
					<thead>
						<tr>
							<th>在线充值总计</th>
							<th>人工加款总计</th>
							<th>最后充值金额</th>
							<th>最后充值时间</th>
						</tr>
					</thead>
					<tbody>
						<tr>
						<td class="obj-zxcunkuanzj"></td>
						<td class="obj-sdjiakuanzj"></td>
						<td class="obj-zhchongzhije"></td>
						<td class="obj-zhchongzhisj"></td>
						</tr>
					</tbody>
				</table>
				<table class="table table-striped table-bordered table-hover">
					<thead>
						<tr>
							<th>在线提款总计</th>
							<th>人工扣款总计</th>
							<th>最后提款金额</th>
							<th>最后提款时间</th>
						</tr>
					</thead>
					<tbody>
						<tr>
						<td class="obj-zxtikuanzj"></td>
						<td class="obj-sdkoukuanzj"></td>
						<td class="obj-zhtikuanje"></td>
						<td class="obj-zhtikuansj"></td>
						</tr>
					</tbody>
				</table>
			<table class="table table-striped table-bordered table-hover">
				<thead>
					<tr>
						<th>注册赠送总计</th>
						<th>充值赠送总计</th>
						<th>用户反水总计</th>
						<th>代理返点总计</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td class="obj-zczengsongzj"></td>
						<td class="obj-ckzengsongzj"></td>
						<td class="obj-rcfanshuizj"></td>
						<td class="obj-dlfandianzj"></td>
					</tr>
				</tbody>
			</table>												           	
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>
	<script>
	
		function  dataTable01(){
			$("#table_id_example").DataTable({
				// "bPaginate": true,
			      "bLengthChange": true,      
			      "bSort": false,
			      // "bInfo": true,
			      "bAutoWidth": false,
//			         "bServerSide":true,
			      'aLengthMenu':[5, 10, 20],
			       "searching": true, 
			       "dom": "t<'tableinfo'i<'tableSearch'p>l>",
//			    "searching": true,l
			       "language": {//语言设置  
			            "lengthMenu": "每页显示 _MENU_ 条记录",     
			            "zeroRecords": "没有检索到数据",     
			            "sInfo": "当前显示 _START_ 到 _END_ 条，共 _TOTAL_ 条记录",     
			            "info": "没有数据",     
			            "oPaginate": {     
			                "sFirst": "首页",     
			                "sPrevious": "前一页",     
			                "sNext": "后一页",     
			                "sLast": "尾页"    
			          	},
			            "search":"",
			            "searchPlaceholder": "请输入关键字",
			            "infoFiltered":   "(从  _MAX_ 记录中搜索出结果)",
			            "infoEmpty":      "没有找到匹配的信息",
			         },
		         "columns": [
		                     { "data": "name", "className": "name-td" },
		                      { "data": "nicheng" },
		                     { "data": "telephone" },
		                     { "data": "qq" },
		                     { "data": "balance" }, 
		                     { "data": "registerTime" },
		                     {"data": null, "defaultContent": "<button class='btn-c-checkDetail btn btn-default'>查看详情</button>"}, 
		                 ],	 
			      "ajax": {
		    	  	  "type": 'post',
		    	      "url":"/bbgl/findAllUesrInfo.do",  /* findAllUesrInfo */   /*  findAllFinanceReport*/
			    	  "data": function ( d ) {
			    		  d.userName=$('#obj-name').val(); 
			           }
			      }
		    })
		}
		 
		 dataTable01();
		 insertSearchBtn();
		 
		  $("body").on("click", function(e) {
				if ($(e.target).hasClass("btn-c-checkDetail")) {
					$('#myModal').modal('show');
					var nameValue = $(e.target).closest("tr").find(".name-td").text()
					$.ajax({
			            dataType: "json",
			            type: "post",
			            url: "/bbgl/userData.do",
			            data: {"user_name":nameValue},
			            success: function (data) {
			            	var result = Object.keys(data.data)
			            	for(var i=0;i<result.length;i++){
			            		var a = result[i];
			            		var b = data.data[a];
			            		if($('.obj-'+a).length>0){
			            			$('.obj-'+a).html(b)
			            		}
			            	}
			            }
			        })				
				}
			})
			
			$("#btn-searchTable").on("click", function(e) {
				var table = $("#table_id_example").DataTable();			
				table.ajax.reload();
			})	
			
			$("#btn-resetTable").on("click", function(e) {
				$('#obj-name').val("");
				var table = $("#table_id_example").DataTable();			
				table.ajax.reload();
			})	 
 </script>
</body>
</html>